import React from 'react';
import { Icon, Accordion, Button } from 'antd-mobile';

import './look.less';


const Panel = Accordion.Panel;

function Header(props) {
  return (
    <div className='h-dot g-f14 g-c8'>
      2020年08月
    </div>
  )
}
function Item(props) {
  return (
    <div className='h-item g-flex g-bg-f g-bg-f g-p10 g-mb10 g-bdrs12'>
      <i className="h-pr5 iconfont iconshijian1 g-round"></i>
      <div className='g-w100'>
        <div className='g-f14 h-mb10'>
          预约咨询
          <span className='g-r'>2020/01/29 13:00-15:00</span>
        </div>
        <div className='g-flex g-between h-ai-c g-f12 g-c8'>
          <div>
            <p className='h-mb10'>预约项目：整形-双眼皮</p>
            <p>指定专家：朱娜</p>
          </div>
          <Button type="ghost" size="small" inline>核对预约</Button>
        </div>
      </div>
    </div>
  )
}

function Look() {
  return (
    <div className='v-history-look g-p10 g-rel'>
      <div className='g-c8 g-flex g-between g-p10'>
        <p className='g-flex h-ai-c'>
          全部<Icon type='down' size='xxs' className='h-pl5'/>
        </p>
        <span>仅显示近1年记录</span>
      </div>

      <Accordion defaultActiveKey='0'>
        <Panel key='0' header={<Header />}>
          <Item></Item>
          <Item></Item>
          <Item></Item>
        </Panel>
      </Accordion>
    </div>
  )
}

export default Look;